<template>
    <section class="handlRow">
        <el-tabs v-model="type" class="tab-pane common-table-tabs" @tab-click="changeTab">
            <el-tab-pane label="上刊报告" name="001"> </el-tab-pane>
            <el-tab-pane label="下刊报告" name="002"> </el-tab-pane>
        </el-tabs>
        <section class="handelBtn">
            <el-button v-if="currentReport.status === 4" type="primary" plain :loading="btnLoading" @click="onRemake">
                重新制作
            </el-button>
            <el-button
                v-if="currentReport.status === 3"
                type="primary"
                :loading="btnLoading"
                plain
                @click="onCancelReport"
            >
                作废报告
            </el-button>
            <el-button v-if="currentReport.status === 2" type="primary" plain @click="getPlanReportList">
                刷新数据
            </el-button>
            <el-button v-if="currentReport.status === 3" @click="downLoadReport">下载 </el-button>
            <el-button @click="router.back()">返回 </el-button>
        </section>
    </section>
    <section>
        <section v-if="currentReport.status !== 3" class="noDataBox">
            <img src="@/assets/no_data.png" />
            <div class="tip">{{ statusTxt[currentReport.status] || '待制作' }}…</div>
        </section>
        <section v-if="currentReport.status === 3">
            <iframe
                :src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
                    currentReport.reportUrl
                )}`"
                width="100%"
                height="600"
                iframeborder="0"
            ></iframe>
        </section>
    </section>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { planReportList, cancelReport, remakeReport } from '@/api/carryBroadcast';
import { ElMessage } from 'element-plus';
import type { TabsPaneContext } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { downLoadCommon } from '@/utils/common';

const router = useRouter();

const route = useRoute();
const type = ref('001');
const skReport = ref({});
const xkReport = ref({});
const currentReport = ref({});
const btnLoading = ref(false);
const statusTxt = reactive({
    1: '待制作',
    2: '制作中',
    3: '制作成功',
    4: '制作失败',
});
const getPlanReportList = async () => {
    const data = await planReportList({ planId: route.query.planId });
    skReport.value = data.find((item: object) => item.type === 1) || {};
    xkReport.value = data.find((item: object) => item.type === 2) || {};
    currentReport.value = type.value === '001' ? skReport.value : xkReport.value;
};
onMounted(() => {
    type.value = route.query.imgType || '001';
    getPlanReportList();
});

const changeTab = async (tab: TabsPaneContext, event: Event) => {
    type.value = tab.props.name;
    currentReport.value = type.value === '001' ? skReport.value : xkReport.value;
};
const onRemake = async () => {
    btnLoading.value = true;
    try {
        await remakeReport({ reportId: currentReport.value.id });
    } finally {
        btnLoading.value = false;
    }
    getPlanReportList();
};
const onCancelReport = async () => {
    if (currentReport.value.status === 3) {
        btnLoading.value = true;
        try {
            await cancelReport({ reportId: currentReport.value.id });
        } finally {
            btnLoading.value = false;
        }

        ElMessage.success('操作成功');
        getPlanReportList();
    } else if (currentReport.value.status !== 3) {
        ElMessage.error(`报告${statusTxt[currentReport.value.status] || '待制作'},不能作废报告`);
    }
};
const downLoadReport = () => {
    if (currentReport.value.status === 3) {
        downLoadCommon(currentReport.value.reportUrl);
    } else if (currentReport.value.status !== 3) {
        ElMessage.error(`报告${statusTxt[currentReport.value.status] || '待制作'},不能下载报告`);
    }
};
</script>

<style lang="scss" scoped>
.handlRow {
    position: relative;
    .handelBtn {
        position: absolute;
        right: 20px;
        top: -5px;
    }
}
.noDataBox {
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .tip {
        margin-top: 15px;
    }
}
</style>
